<template>
  <view class="register-container">
    <!-- 樱花背景装饰 -->
    <view class="sakura-bg">
      <view class="sakura sakura-1">🌸</view>
      <view class="sakura sakura-2">🌸</view>
      <view class="sakura sakura-3">🌸</view>
      <view class="sakura sakura-4">🌸</view>
      <view class="sakura sakura-5">🌸</view>
    </view>

    <!-- 主内容区域 -->
    <view class="register-content">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>

      <!-- 应用标题 -->
      <view class="app-title">
        <text class="title-main">加入SakuraEcho</text>
        <text class="title-sub">开启动漫创作之旅</text>
      </view>

      <!-- 注册表单 -->
      <view class="register-form">
        <view class="form-title">创建账号</view>
        
        <!-- 用户名输入 -->
        <view class="input-group">
          <view class="input-item">
            <view class="input-icon">👤</view>
            <input 
              class="input-field" 
              type="text" 
              v-model="registerForm.username" 
              placeholder="用户名（2-16位字符）"
              placeholder-class="placeholder"
              maxlength="16"
            />
            <view class="input-clear" v-if="registerForm.username" @click="clearField('username')">
              <text class="clear-icon">×</text>
            </view>
          </view>
          
          <!-- 邮箱输入 -->
          <view class="input-item">
            <view class="input-icon">📧</view>
            <input 
              class="input-field" 
              type="text" 
              v-model="registerForm.email" 
              placeholder="邮箱地址"
              placeholder-class="placeholder"
            />
            <view class="input-clear" v-if="registerForm.email" @click="clearField('email')">
              <text class="clear-icon">×</text>
            </view>
          </view>
          
          <!-- 密码输入 -->
          <view class="input-item">
            <view class="input-icon">🔒</view>
            <input 
              class="input-field" 
              :type="showPassword ? 'text' : 'password'" 
              v-model="registerForm.password" 
              placeholder="密码（6-20位字符）"
              placeholder-class="placeholder"
              maxlength="20"
            />
            <view class="password-toggle" @click="togglePassword">
              <text class="toggle-icon">{{ showPassword ? '🙈' : '👁️' }}</text>
            </view>
          </view>
          
          <!-- 确认密码 -->
          <view class="input-item">
            <view class="input-icon">🔒</view>
            <input 
              class="input-field" 
              :type="showConfirmPassword ? 'text' : 'password'" 
              v-model="registerForm.confirmPassword" 
              placeholder="确认密码"
              placeholder-class="placeholder"
              maxlength="20"
            />
            <view class="password-toggle" @click="toggleConfirmPassword">
              <text class="toggle-icon">{{ showConfirmPassword ? '🙈' : '👁️' }}</text>
            </view>
          </view>
          
          <!-- 验证码 -->
          <view class="input-item captcha-item">
            <view class="input-icon">🔐</view>
            <input 
              class="input-field captcha-input" 
              type="text" 
              v-model="registerForm.captcha" 
              placeholder="验证码"
              placeholder-class="placeholder"
              maxlength="6"
            />
            <button 
              class="captcha-btn" 
              :disabled="captchaCooldown > 0"
              @click="sendCaptcha"
            >
              <text v-if="captchaCooldown === 0" class="captcha-text">发送验证码</text>
              <text v-else class="captcha-text">{{ captchaCooldown }}s</text>
            </button>
          </view>
        </view>

        <!-- 用户协议 -->
        <view class="agreement-section">
          <checkbox-group @change="toggleAgreement">
            <label class="agreement-label">
              <checkbox :checked="agreementChecked" color="#FF69B4" />
              <text class="agreement-text">我已阅读并同意</text>
              <text class="agreement-link" @click="viewAgreement">《用户协议》</text>
              <text class="agreement-text">和</text>
              <text class="agreement-link" @click="viewPrivacy">《隐私政策》</text>
            </label>
          </checkbox-group>
        </view>

        <!-- 注册按钮 -->
        <button 
          class="register-btn" 
          :class="{ 'loading': isLoading }"
          :disabled="isLoading || !isFormValid"
          @click="handleRegister"
        >
          <text v-if="!isLoading" class="btn-text">立即注册</text>
          <text v-else class="btn-text">注册中...</text>
        </button>

        <!-- 登录链接 -->
        <view class="login-link">
          <text class="link-text">已有账号？</text>
          <text class="link-btn" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="register-footer">
      <text class="footer-text">加入动漫创作社区</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      registerForm: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        captcha: ''
      },
      showPassword: false,
      showConfirmPassword: false,
      agreementChecked: false,
      isLoading: false,
      captchaCooldown: 0
    }
  },
  computed: {
    isFormValid() {
      const { username, email, password, confirmPassword, captcha } = this.registerForm
      return (
        username.trim().length >= 2 &&
        username.trim().length <= 16 &&
        this.validateEmail(email) &&
        password.length >= 6 &&
        password.length <= 20 &&
        password === confirmPassword &&
        captcha.length === 6 &&
        this.agreementChecked
      )
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    clearField(field) {
      this.registerForm[field] = ''
    },
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    toggleConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    toggleAgreement(e) {
      this.agreementChecked = e.detail.value.length > 0
    },
    validateEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },
    async sendCaptcha() {
      if (!this.registerForm.email) {
        uni.showToast({
          title: '请先输入邮箱',
          icon: 'none'
        })
        return
      }

      if (!this.validateEmail(this.registerForm.email)) {
        uni.showToast({
          title: '邮箱格式不正确',
          icon: 'none'
        })
        return
      }

      // 开始倒计时
      this.captchaCooldown = 60
      
      const timer = setInterval(() => {
        this.captchaCooldown--
        if (this.captchaCooldown <= 0) {
          clearInterval(timer)
        }
      }, 1000)

      // 模拟发送验证码
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 这里应该是随机生成的验证码，实际开发中由后端生成并发送
        const mockCaptcha = Math.random().toString().slice(2, 8)
        
        uni.showToast({
          title: `验证码已发送: ${mockCaptcha}`,
          icon: 'none',
          duration: 3000
        })

      } catch (error) {
        uni.showToast({
          title: '验证码发送失败',
          icon: 'none'
        })
        this.captchaCooldown = 0
      }
    },
    async handleRegister() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整且正确的信息',
          icon: 'none'
        })
        return
      }

      this.isLoading = true

      try {
        // 模拟注册请求
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        // 注册成功
        uni.showToast({
          title: '注册成功',
          icon: 'success'
        })

        // 保存用户信息
        uni.setStorageSync('userInfo', {
          username: this.registerForm.username,
          email: this.registerForm.email
        })

        // 跳转到登录页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }, 1500)

      } catch (error) {
        uni.showToast({
          title: '注册失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    },
    viewPrivacy() {
      uni.navigateTo({
        url: '/pages/privacy/privacy'
      })
    }
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6 0%, #FFF0F5 50%, #FFE4E6 100%);
  position: relative;
  overflow: hidden;
}

.sakura-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sakura {
  position: absolute;
  font-size: 24rpx;
  animation: float 6s infinite ease-in-out;
}

.sakura-1 { top: 10%; left: 10%; animation-delay: 0s; }
.sakura-2 { top: 20%; right: 15%; animation-delay: 1s; }
.sakura-3 { top: 60%; left: 5%; animation-delay: 2s; }
.sakura-4 { top: 40%; right: 5%; animation-delay: 3s; }
.sakura-5 { top: 80%; left: 20%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20rpx) rotate(180deg); }
}

.register-content {
  position: relative;
  z-index: 1;
  padding: 120rpx 60rpx 60rpx;
}

.back-btn {
  position: absolute;
  top: 80rpx;
  left: 60rpx;
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 36rpx;
  color: #333;
}

.app-title {
  text-align: center;
  margin-bottom: 80rpx;
}

.title-main {
  display: block;
  font-size: 56rpx;
  font-weight: bold;
  color: #FF69B4;
  margin-bottom: 16rpx;
}

.title-sub {
  display: block;
  font-size: 28rpx;
  color: #888;
}

.register-form {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 105, 180, 0.1);
  backdrop-filter: blur(10rpx);
}

.form-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 48rpx;
}

.input-item {
  position: relative;
  margin-bottom: 40rpx;
  background: #F8F8FF;
  border-radius: 24rpx;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  height: 96rpx;
  border: 2rpx solid #E6E6FA;
  transition: all 0.3s;
}

.input-item:focus-within {
  border-color: #FF69B4;
  box-shadow: 0 0 0 4rpx rgba(255, 105, 180, 0.1);
}

.input-icon {
  font-size: 36rpx;
  margin-right: 24rpx;
  color: #888;
}

.input-field {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
}

.placeholder {
  color: #BBB;
  font-size: 32rpx;
}

.input-clear {
  padding: 16rpx;
  margin-left: 16rpx;
}

.clear-icon {
  font-size: 36rpx;
  color: #888;
}

.password-toggle {
  padding: 16rpx;
  margin-left: 16rpx;
}

.toggle-icon {
  font-size: 36rpx;
  color: #888;
}

.captcha-item {
  padding-right: 0;
}

.captcha-input {
  flex: 1;
  padding-right: 32rpx;
}

.captcha-btn {
  width: 200rpx;
  height: 64rpx;
  background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
  border: none;
  border-radius: 32rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: white;
}

.captcha-btn:disabled {
  background: #CCC;
}

.captcha-text {
  color: white;
}

.agreement-section {
  margin-bottom: 60rpx;
}

.agreement-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.agreement-text {